<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!--
options:选项，是一个数组
:props="{
   label:"label对应字段 "
   value:"value对应字段",
   children:"children对应字段"
}"

        -->
      <h3>{{value}}</h3>
      <el-cascader
        v-model="value"
        :options="options"
        :props="{
            label:'ooo',
            value:'ooo',
            children:'child'

        }"
        @change="handleChange"
      ></el-cascader>

      <h3>复选框{{checkboxValue}}</h3>
      <!-- 如果复选框v-model的值为字符串时，选中某项后它的值为true 
                                 数组时，选中某项后它的值数组push(该项的值)
     -->
      <el-checkbox v-model="checkboxValue" label="hb">湖北省</el-checkbox>
      <el-checkbox v-model="checkboxValue" label="hn">湖南省</el-checkbox>
      <h3>单选框{{radioValue}}</h3>
      <el-radio v-model="radioValue" label="hb">湖北省</el-radio>
      <el-radio v-model="radioValue" label="hn">湖南省</el-radio>
    </div>
    <script src="./vue.js"></script>
    <link rel="stylesheet" href="./ele.css" />
    <script src="./index.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          checkboxValue: [],
          radioValue: "",
          value: [],
          options: [
            {
              ooo: "广东省",
              child: [
                {
                  ooo: "广州市",
                  child: [
                    {
                      ooo: "天河区",
                    },
                    {
                      ooo: "白云区",
                    },
                  ],
                },
                {
                  value: "sz",
                  label: "深圳市",
                  child: [
                    {
                      value: "ba",
                      label: "宝安",
                    },
                  ],
                },
              ],
            },
          ],
        },
        methods: {
          handleChange(value) {
            window.console.log(value);
          },
        },
      });
    </script>
  </body>
</html>
